---
title: Material Overview
---

<Image src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*Iq8iRKWPAqgAAAAAAAAAAAAADgDwAQ/original" />

A material contains **Shader, ShaderData, and RenderStates**.

## Shader

A Shader is a program that runs on the GPU, typically consisting of a vertex shader and a fragment shader. You can conveniently write this code using [ShaderLab syntax](/en/docs/graphics/material/shaderLab/overview/).

## Shader Data

Like other programming languages, we use many variables when writing shaders. Refer to the [built-in variables documentation](/en/docs/graphics/material/variables/) to find the desired built-in variables. You can also manually upload shader data and macro switches via the [ShaderData tutorial](/en/docs/graphics/material/examples/shaderData):

## Render States

Galacean supports configuring [BlendState](/apis/core/#RenderState-BlendState), [DepthState](/apis/core/#RenderState-DepthState), [StencilState](/apis/core/#RenderState-StencilState), and [RasterState](/apis/core/#RenderState-RasterState).

Let's take a standard rendering process for a transparent object as an example. We enable transparent blending and disable depth writing since transparent objects are rendered additively. We also set it to the transparent render queue:

```ts
material.renderQueueType = RenderQueueType.Transparent;
material.renderState.depthState.writeEnabled = false;
material.renderState.blendState.enabled = true;
```

We recommend using ShaderLab for configuration:

```ts showLineNumbers {3,7-12,14}
Pass "Pass0" {
    DepthState {
      WriteEnabled = false;
    }

    BlendState {
      Enabled = true;
      SourceColorBlendFactor = BlendFactor.SourceAlpha;
      DestinationColorBlendFactor = BlendFactor.OneMinusSourceAlpha;
      SourceAlphaBlendFactor = BlendFactor.One;
      DestinationAlphaBlendFactor = BlendFactor.OneMinusSourceAlpha;
    }

    RenderQueueType = Transparent;
}
```

<Callout type="info">
  Render states can also be set as variables and controlled via ShaderData. For details, see [ShaderLab Render State Configuration](/en/docs/graphics/material/shaderLab/renderState).
</Callout>